<template>
  <div class="house-item-v3">
    <div class="item-inner">
      <div class="cover">
        <img style="width: 100%; border-radius: 10px" :src="itemData.image.url" alt="" />
        <div class="infos">
          <span class="location"
            ><img src="@/assets/img/location(2).png" alt="" />{{ itemData.location }}</span
          >
          <span class="house-name">{{ itemData.houseName }}</span>
          <span class="summary">{{ itemData.summaryText }}</span>
          <div class="rate-price">
            <span style="color: lightsalmon">￥{{ itemData.finalPrice }}</span>
            <del style="font-size: 12px; color: lightgray">￥{{ itemData.productPrice }}</del>
            <span
              style="
                background-color: lightcoral;
                color: #fff;
                border-radius: 8px;
                font-size: 12px;
                line-height: 16px;
                margin-left: 5px;
                padding: 0px 5px;
              "
              >{{ itemData.priceTipBadge.text }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  itemData: {
    type: Object,
    default() {
      return {}
    },
  },
})
</script>

<style lang="scss" scoped>
.house-item-v3 {
  .item-inner {
    position: relative;
    overflow: hidden;
    .cover {
      .infos {
        position: relative;
        display: flex;
        flex-direction: column;
        bottom: 0;
        color: #000;
        .summary {
          padding: 10px;
          color: lightgray;
        }
        .house-name {
          padding: 0px 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .location {
          padding: 5px;
        }
        .rate-price {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 5px;
        }
      }
    }
  }
}
</style>
